<template>
  <div id="my-tree">
    <a-tree
      v-if="treeData.length"
      defaultExpandAll
      checkable
      v-model:checkedKeys="checkedKeys"
      :tree-data="treeData"
      @check="onCheck"
    >
      <template #title="{ title, level, key, draged, children }">
        <span v-if="level === 1">
          <a-badge :count="children.filter((item) => !item.draged).length">
            <span>{{ title }}</span>
          </a-badge>
        </span>
        <span v-else>
          <div v-if="!draged && level === 2">
            <div
              :draggable="true"
              :data-key="key"
              :data-title="title"
              @dragstart="onDragStart($event)"
              class="flex items-center justify-between w-full"
            >
              <span>{{ title }} </span>
              <DragOutlined />
            </div>
          </div>
          <span v-else>{{ title }}</span>
        </span>
      </template>
    </a-tree>
  </div>
</template>
  <script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { DragOutlined } from '@ant-design/icons-vue';
import findTree from 'xe-utils/findTree';
import { defHttp } from '/@/utils/http/axios';

export default defineComponent({
  components: { DragOutlined },
  props: ['data'],
  setup(props, { emit }) {
    watch(
      () => props.data,
      (val) => {
        let nodes = <any>[];
        treeData.value = val.map((dtu) => {
          return {
            title: dtu.name,
            key: 'dtu' + dtu.id,
            level: 0,
            draged: false,
            children: dtu.gatherDeviceList.map((hub) => {
              return {
                title: hub.name,
                key: 'hub' + hub.id,
                level: 1,
                draged: false,
                children: hub.sensorList.map((sen) => {
                  let senKey = 'sen' + sen.id;
                  checkedKeys.value.push(senKey);
                  let node = {
                    title: '传感器-' + sen.id,
                    key: 'sen' + sen.id,
                    level: 2,
                    draged: !!sen.x,
                  };
                  if (node.draged) {
                    nodes.push({
                      ...node,
                      x: sen.x,
                      y: sen.y,
                      visible: true,
                    });
                  }
                  return node;
                }),
              };
            }),
          };
        });
        emit('init-draged', nodes);
        console.log(val);
      },
    );

    const treeData = ref([]);
    const target = ref({});
    const checkedKeys = ref<string[]>([]);

    function onDragStart(e) {
      emit('on-drag-start', e);
      target.value = {
        key: e.target.dataset['key'],
        title: e.target.dataset['title'],
      };
    }

    function dragDone(e) {
      console.log(e);
      let find = findTree(treeData.value, (item) => item.key === target.value.key);
      find.item.draged = true;
      checkedKeys.value.push(find.item.key);
      defHttp.post({
        url: '/Sensor/bind-pos',
        params: {
          id: find.item.key.substring(3),
          x: e.clientX,
          y: e.clientY,
        },
      });
    }

    function onCheck(checked) {
      emit('on-check', checked);
    }

    return {
      treeData,
      target,
      onDragStart,
      dragDone,
      checkedKeys,
      onCheck,
    };
  },
});
</script>
  
<style lang="less">
#my-tree {
  .ant-tree .ant-tree-treenode {
    width: 100%;
  }
  .ant-tree-node-content-wrapper {
    width: 100%;
  }
}
</style>
  